/**
 * Created by lenovo on 2017/5/12.
 */
import React from 'react';


//插件react-tabs
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
//组件
import VideoPlayer from './videoPlayer.react';
import StorePageEvaluate from './storePageEvaluate.react';
import CommodityMessage from './commodityMessage.react';

class StoreSwitchTab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            evaluateNum: 0,
            commodityNum: 0
        };

        this.playerOptions = {
            autoplay: true,
            controls: true,
            width: 375,
            height: 300,
            sources: [{
                src: "http://hls-live.jia.360.cn/live_jia_public/_LC_RE_non_360M072915915078498501724393_CX/index.m3u8",
                type: 'application/x-mpegURL'
            }],
        };
    }


    componentDidMount() {
        //更新tab的数字信息
        if (this.props.evaluateData instanceof Array) {
            this.setState({
                evaluateNum: this.props.evaluateData.length
            });
        } else {
            this.setState({
                evaluateNum: 0,
            });
        }

        if (this.props.commodityData instanceof Array) {
            this.setState({
                commodityNum: this.props.commodityData.length
            });
        } else {
            this.setState({
                commodityNum: 0,
            });
        }
    }

    componentWillReceiveProps(nextProps) {
        //可以用来对比当前的props的内容和nextprops的内容是否一致
        if (nextProps.evaluateData !== this.props.evaluateData) {
            this.setState({
                evaluateNum: nextProps.evaluateData.length
            });
        }
        if (nextProps.commodityData !== this.props.commodityData) {
            this.setState({
                commodityNum: nextProps.commodityData.length
            })
        }
    }

    render() {

        return (
            <Tabs>
                <TabList>
                    <Tab>
                        <div className="allEvaluate">
                            <span className="allEvaluateFont">
                                 直播
                            </span>
                        </div>
                    </Tab>
                    <Tab>
                        <div className="allEvaluate">
                            <span className="allEvaluateFont">
                                全部评论({this.state.evaluateNum})
                            </span>
                        </div>
                    </Tab>
                    <Tab>
                        <div className="allEvaluate">
                            <span className="allEvaluateFont">
                                全部商品({this.state.commodityNum})
                            </span>
                        </div>
                    </Tab>
                </TabList>

                <TabPanel>
                    <VideoPlayer { ...this.playerOptions } />
                    {/*<VideoPlayer/>*/}
                </TabPanel>

                <TabPanel>
                    <StorePageEvaluate evaluateData={this.props.evaluateData}/>
                    {/*<StorePageEvaluate  />*/}
                </TabPanel>
                <TabPanel>
                    <CommodityMessage commodityData={this.props.commodityData}/>
                    {/*<CommodityMessage />*/}
                </TabPanel>
            </Tabs>
        );
    }
}

export default StoreSwitchTab;